<template>
    <MyTable :headerData="fruitsHeaderData" :data="fruitsData">
        <template #action>
            <button>修改</button>
            <button>删除</button>
        </template>
    </MyTable>

    <MyTable :headerData="movieHeaderData" :data="movieData">
        <template #hot="slotProps">
            {{ slotProps.item.hot ? '是' : '否' }}
        </template>
        <template #types="slotProps">
            {{ slotProps.item.types.join(' / ') }}
        </template>
        <template #action="slotProps">
            <button>修改</button>
            <button @click="onDeleteMovie(slotProps.item._id)">删除</button>
        </template>
    </MyTable>
</template>

<script setup>
import { ref } from 'vue';

const fruitsHeaderData = [
    { title: '编号', prop: 'id' },
    { title: '商品名称', prop: 'name' },
    { title: '商品数量', prop: 'count' },
    { title: '商品单价', prop: 'price' },
    { title: '操作', prop: 'action' },
];

const fruitsData = ref([
    { id: 1, name: '苹果', count: 5, price: 4 },
    { id: 2, name: '苹果', count: 5, price: 4 },
    { id: 3, name: '苹果', count: 5, price: 4 },
])

const movieHeaderData = [
    { title: '编号', prop: '_id' },
    { title: '电影名称', prop: 'name' },
    { title: '电影类型', prop: 'types' },
    { title: '制片国家', prop: 'country' },
    { title: '是否热映', prop: 'hot' },
    { title: '操作', prop: 'action' },
];

const movieData = ref([
    {
        "_id": "682d9da7573f2ec0eb01fb5b",
        "name": "攻壳机动队",
        "duration": "83",
        "hot": 1,
        "types": [
            "动作",
            "科幻",
            "动画"
        ],
        "country": "日本",
        "year": "1995",
    },
    {
        "_id": "682da14ba9d2e7026f9c3016",
        "name": "幽灵公主",
        "score": "8.9",
        "duration": "134",
        "hot": 0,
        "types": [
            "动画",
            "奇幻",
            "冒险"
        ],
        "country": "日本",
        "year": "1997",
    },
    {
        "_id": "682da1d6a9d2e7026f9c301e",
        "name": "情书",
        "score": "8.9",
        "duration": "117",
        "hot": 1,
        "types": ["爱情"],
        "country": "日本",
        "year": "1995",
    },
    {
        "_id": "682ef55afa09000092007cbe",
        "name": "诡才之道",
        "duration": "112",
        "hot": 1,
        "types": [
            "喜剧",
            "恐怖"
        ],
        "country": '中国台湾',
        "year": "2024",
    },
    {
        "_id": "6830407c5b05254ad43ad998",
        "name": "终极对弈",
        "score": "7.3",
        "country": '韩国',
        "duration": "116",
        "hot": 0,
        "types": [
            "剧情", "传记"
        ],
        "year": "2025",
    },
    {
        "_id": "682f31885631163b8565d71f",
        "name": "大风杀",
        "score": "7.0",
        "country": '中国大陆',
        "duration": "131",
        "hot": 1,
        "types": [
            "悬疑",
            "犯罪",
            "剧情"
        ],
        "year": "2025",
    }
])


function onDeleteMovie(deleteId) {
    movieData.value = movieData.value.filter(item => {
        // 筛选出【不删除】的数据
        return item._id !== deleteId;
    })
}

</script>

<style scoped></style>